<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>ClicKing Network 點擊王</title>
<link href="/css/style.css" rel="stylesheet" type="text/css" />
<link href="/css/tablesorter.css" rel="stylesheet" type="text/css" />
<!--<link rel="stylesheet" type="text/css" media="all" href="/css/calendar-blue2.css"  />-->
<link rel="stylesheet" type="text/css" href="/css/datePicker.css"/>

<!--[if lt IE 9]><script language="javascript" type="text/javascript" src="/js/excanvas.js"></script><![endif]-->
<link rel="stylesheet" type="text/css" href="/css/jquery.jqplot.min.css" />
<link rel="stylesheet" type="text/css" href="/css/examples.css" />

<script language="javascript" type="text/javascript" src="/js/jquery.min.js"></script>
<script src="/js/jquery.tablesorter.min.js" type="text/javascript"></script>


<script src="/js/jquery.datePicker.js" type="text/javascript"></script>
<script src="/js/date.js" type="text/javascript"></script>
<!--
<script type="text/javascript" src="/js/jquerydate.js"></script>
<script type="text/javascript" src="/js/jquery.dynDateTime.js"></script>
<script type="text/javascript" src="/js/lang/calendar-en.js"></script>
-->
<!-- BEGIN: load jqplot -->
<script language="javascript" type="text/javascript" src="/js/jquery.jqplot.min.js"></script>
<script language="javascript" type="text/javascript" src="/js/plugins/jqplot.dateAxisRenderer.min.js"></script>
<script language="javascript" type="text/javascript" src="/js/plugins/jqplot.barRenderer.min.js"></script>
<script language="javascript" type="text/javascript" src="/js/plugins/jqplot.categoryAxisRenderer.min.js"></script>
<script language="javascript" type="text/javascript" src="/js/plugins/jqplot.cursor.min.js"></script>
<script language="javascript" type="text/javascript" src="/js/plugins/jqplot.highlighter.min.js"></script>
<script language="javascript" type="text/javascript" src="/js/plugins/jqplot.dragable.min.js"></script>
<script language="javascript" type="text/javascript" src="/js/plugins/jqplot.trendline.min.js"></script>
<!-- END: load jqplot -->


<script src="/js/adsense.js" type="text/javascript"></script>
<script type="text/javascript">
var ajaxDataRenderer;
var plotOptions;
$(document).ready(function(){
	if ($(".tablesorter").length > 0) {
        $(".tablesorter").tablesorter({
            sortList: [[0, 0]],
            widgets: ['zebra']
        });
    }
    $('.date-pick').datePicker({startDate:'2010-01-01'});

	$('#report_date_start').bind(
		'dpClosed',
		function(e, selectedDates)
		{
			var d = selectedDates[0];
			if (d) {
				d = new Date(d);
				$('#report_date_end').dpSetStartDate(d.addDays(1).asString());
			}
		}
	);
	$('#report_date_end').bind(
		'dpClosed',
		function(e, selectedDates)
		{
			var d = selectedDates[0];
			if (d) {
				d = new Date(d);
				$('#report_date_start').dpSetEndDate(d.addDays(-1).asString());
			}
		}
	);
	 if($('#dataChart').length > 0){
	 <?php if(isset($website) && isset($start_date) && isset($end_date)) { ?>
	 $.ajax({
        beforeSend: function(){
            $("#detail_table").html('<img src="/images/public/ajax-loader.gif" />');
        },
        type: "POST",
        cache: false,
        url: "/report_detail/report_detail_table",
		dataType: "json",
        data: {
            website: '<?php echo $website; ?>',
			start_date: '<?php echo $start_date; ?>',
			end_date: '<?php echo $end_date; ?>',
			chart_type: 'click'
        },
        success: function(data){
            $("#detail_table").html(data['table_data']);
			$(".tablesorter").tablesorter( {sortList: [[0,0]],widgets: ['zebra']} );
            plotOptions = {
                axes: {
                    xaxis: {
                        renderer: $.jqplot.DateAxisRenderer,
                        tickOptions: {
                            formatString: '%b&nbsp;%#d'
                        }
                    },
                    yaxis: {
						tickOptions: {
                        	formatString: '%d'
                    	},
                        max: data['max_data'],
                        min: data['min_data']
                    }
                },
                highlighter: {
                    show: true,
                    sizeAdjust: 7.5
                }
            };
			$.jqplot('dataChart', data['chart_data'], plotOptions).replot();
        }
    });
	<?php }else{ ?>
	plotOptions = {
        axes: {
            xaxis: {
                renderer: $.jqplot.DateAxisRenderer,
                tickOptions: {
                    formatString: '%b&nbsp;%#d'
                }
            },
            yaxis: {
				autoscale:true
            }
        },
        noDataIndicator: {
            show: true,
            indicator:  '',
            axes: {
                xaxis: {
                    renderer: $.jqplot.DateAxisRenderer,
                    tickOptions: {
                        formatString: '%b&nbsp;%#d'
                    }
                },
                yaxis: {
                    tickOptions: {
                        formatString: '%d'
                    },
					autoscale:true
                }
            }
        },
        highlighter: {
            show: true,
            sizeAdjust: 7.5
        },
        cursor: {
            show: false
        }
    };
	
	$.jqplot.config.enablePlugins = false;
	$.jqplot.config.defaultWidth = "650px";
    $.jqplot.config.defaultHeight = "300px";
    plot1 = $.jqplot('dataChart', [], plotOptions);
	
	<?php } ?>
    }
});
</script>
<style type="text/css">
    a.dp-choose-date {
        float: left;
        width: 16px;
        height: 16px;
        padding: 0;
        margin: 5px 3px 0;
        display: block;
        text-indent: -2000px;
        overflow: hidden;
        background: url(/images/calendar.png) no-repeat;
    }
    
    a.dp-choose-date.dp-disabled {
        background-position: 0 -20px;
        cursor: default;
    }
    
    /* makes the input field shorter once the date picker code
     * has run (to allow space for the calendar icon
     */
    input.dp-applied {
        width: 90px;
        float: left;
    }
    
</style>
</head>

<body>
<table width="100%" border="0" cellpadding="0" cellspacing="0">
  <tr>
    <td align="center"><table width="1034" border="0" cellpadding="0" cellspacing="0" class="mid_bg">
      <tr>
        <td align="center" valign="top"><table width="982" border="0" cellspacing="0" cellpadding="0">
       
          <tr>
            <td background="/images/header.jpg" width="982" height="161" align="left" valign="top"><table width="982" border="0" cellspacing="0" cellpadding="0">
              <tr>
                <td width="245" height="90" align="center" valign="bottom"><table width="245" border="0" cellspacing="0" cellpadding="0">
                  <tr>
                    <td align="center" valign="bottom"><a href="/"><img src="/images/logo.jpg" width="201" height="71" border="0" /></a></td>
                  </tr>
                </table>
                </td>
                <td width="591">&nbsp;</td>
                <td width="161" align="right" valign="top"><table width="161" border="0" cellspacing="0" cellpadding="0">
                  <tr>
                   <td height="3"></td> 
                  </tr>
                  <?php if($is_login){ ?>
				  	<tr>
                   		<td align="center" valign="middle"><a href="/auth/logout" class="font_login">Logout</a></td> 
                  	</tr>
				  <?php } ?>
                </table></td>
              </tr>
              <tr>
                <td colspan="3"><table width="390" border="0" cellspacing="0" cellpadding="0">
                  <tr>
                    <td height="21"></td>
                    </tr>
                </table></td>
                </tr>
              <tr>
                <td class="space_01" colspan="3"></td>
              </tr>
              </table><table width="650" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td width="20">&nbsp;</td>
    <td><div class="navigation">
	<ul>
		<?php
		foreach($navigation as $key=>$val){
			if($navigation_selected == $key){
				echo '<li><a href="'.$val['href'].'" id="navigation_selected">'.$val['name'].'</a></li>';	
			}
			else echo '<li><a href="'.$val['href'].'" >'.$val['name'].'</a></li>';
		}
		
		?>
		
		</ul>
</div></td>
  </tr>
</table>
</td>
          </tr>